<template>
  <!-- <transition>
    <router-view :class="{ padding: route !== '/' ? true : false }" />
  </transition> -->
  <router-view
    v-slot="{ Component }"
  >
    <template v-if="Component">
      <transition mode="out-in">
        <keep-alive>
          <div
            :class="{ padding: !(route === '/article' || route === '/' || route === '/404' || route === '/login')&&!app.full}"
            :key="route.name"
          >
            <suspense>
              <template #default>
                <component :is="Component" />
              </template>
              <template #fallback>
                <SkeletonCpt />
              </template>
            </suspense>
          </div>
        </keep-alive>
      </transition>
    </template>
  </router-view>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { appStore } from '@/store/app'

import SkeletonCpt from '@/components/Skeleton.vue'

const router = useRouter()
const app = appStore()

const route:any = ref(router.currentRoute.value.path)
app.full = !!(route.value === '/' || route.value === '/404' || route.value === '/login')

watch(() => router.currentRoute.value, (val) => {
  route.value = val.path
  app.full = !!(val.path === '/' || val.path === '/404' || val.path === '/login')
})
</script>

<style lang="scss" scoped>
@import '@/assets/css/constant.scss';

/* 响应式布局 - 小于 540px */
@media screen and (max-width: 540px) {
  .padding {
    padding: 20px 10px !important;
  }
}

.padding {
  overflow: hidden;
  padding: 30px;
  border: 1px solid $theme-color4;
  border-radius: 5px;
  background: $theme-color6;
}

.v-enter {
  transform: translateX(-10px);
  opacity: 0;
}
.v-enter-active {
  transition: all 0.5s ease;
}
</style>
